<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
ul{list-style:none;}
li{position:relative;}
img{position:absolute;top:0px;left:0px;}
.img1{left:0px;top:0px;}
.img2{left:200px;top:50px;}
.img3{left:400px;top:100px;}
.img4{left:600px;top:150px;}
.img5{left:800px;top:200px;}
	</style>
	<script type="text/javascript">

window.onload = function() {
	
//获取 ul 和 li对象	img对象 img的style对象
var oUl = document.getElementById('ul');
var oLis = oUl.getElementsByTagName('li');
var aImgs = [];
var aImgStyles = [];
for (var i = 0;i < oLis.length;i++) {
	aImgs[i] = oLis[i].firstChild;
	aImgStyles[i] = {
						 'top':getStyle(oLis[i].firstChild,'top'),
						 'left':getStyle(oLis[i].firstChild,'left')
				};
}

// aImgs[1].style.top = '0px';



next = function() {
	var oFirst = aImgStyles.shift();
	aImgStyles.push(oFirst);
	for (var i = 0;i < aImgs.length;i++) {
		changeStyle(aImgs[i],aImgStyles[i]);
	}
	// changeStyle(aImgs[1],aImgStyles[1]);
}




//-------------------------------------------

function getStyle(obj,att) {
	if(typeof(obj.currentStyle) == 'undefined') {
		return getComputedStyle(obj)[att];
	} else {
		return obj.currentStyle[att];
	}
}


function changeStyle(obj,oAtt) {
		clearInterval(obj.timeId);
	obj.timeId = setInterval(function(){
										for(var i in oAtt) {
											
											offex = (parseInt(getStyle(obj,i)) - parseFloat(oAtt[i]))/15;
											obj.style[i] = parseInt(getStyle(obj,i)) - offex + 'px';
										}
								},30);
}


}


	</script>
</head>
<body>
	<ul id="ul">
		<li><img src="moren.gif" alt="" class="img1"></li>
		<li><img src="moren.gif" alt="" class="img2"></li>
		<li><img src="moren.gif" alt="" class="img3"></li>
		<li><img src="moren.gif" alt="" class="img4"></li>
		<li><img src="moren.gif" alt="" class="img5"></li>
	</ul>
	<a href="javascript:next()">下一个</a>
</body>
</html>